<template>
  <div class="cate-part">
    <div class="common-middle" v-if="cateLists && cateLists.length > 0">
      <div class="common-middle-cate">
        <div
          @click="handleClickCate(item)"
          v-for="(item, index) in cateLists"
          :key="index"
          class="common-middle-cate-item">
          <div class="img">
            <img :src="item.industry_img" alt="">
          </div>
          <div class="txt">{{ item.title }}</div>
        </div>
        <div
          @click="handleClickCate({}, 'all')"
          v-if="$route.query.cate_type != 'all'"
          class="common-middle-cate-item">
          <div class="img">
            <img src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/all.png" alt="">
          </div>
          <div v-if="showIndex == 7" class="txt">全部</div>
          <div v-else class="txt">收起</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import small from '@/smallapp/small.js'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      cateLists: {
        type: Array
      },
      showIndex: {
        type: [String, Number],
        default: 7
      }
    },
    methods: {
      handleClickCate(item, str) {
        this.sid = small.globalData.shopId
        this.pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
        let link = ''
        link = window.location.origin + '/mb/shop/storeList?' + 'sid=' + this.sid + '&pid=' + this.pid + '&cid=' + item.industry_id+ '&cate_type=' + str
        openPage(link)
      }
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .cate-part{
    .common-middle{
      margin: 20px 0 0;
      &-cate{
        background: #fff;
        font-size: 0;
        padding: 39px 34px 10px;
        &-item{
          @include alignTop;
          width: 100px;
          margin-right: 94px;
          font-size: 24px;
          color: #171717;
          margin-bottom: 30px;
          .img{
            width: 98px;
            height: 98px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 6px 14px #f1f1f1;
            img{
              width: 100%;
            }
          }
          .txt{
            margin-top: 20px;
            text-align: center;
          }
          &:nth-child(4n){
            margin-right: 0;
          }
        }
      }
    }
  }
</style>
